<route lang="json5">
{
  style: {
    navigationBarTitleText: '数据排行',
  },
}
</route>

<template>
  <view class="data-sort-container">
    <image class="data-sort-container-bg" src="@/static/images/content-bg.png"></image>
    <view class="data-sort-content">
      <view class="tab-list">
        <view
          v-for="(item, index) in tabData"
          :key="index"
          :class="['tab-item', currentTab === index ? 'active' : '']"
          @click="changeTab(index)"
        >
          {{ item }}
        </view>
      </view>
      <TownBoard ref="townBoardRef" v-show="currentTab === 0" />
      <HallBoard ref="hallBoardRef" v-show="currentTab === 1" />
    </view>
  </view>
</template>

<script setup>
import TownBoard from './components/TownBoard.vue'
import HallBoard from './components/HallBoard.vue'
import { onMounted } from 'vue'

const tabData = ['镇(街)活动数量榜', '礼堂活动数量榜']
const currentTab = ref(0)
const hallInit = ref(true)
const changeTab = async (index) => {
  if (currentTab.value === index) {
    return
  }
  currentTab.value = index
  if (index === 0) {
    townBoardRef.value.getData()
  } else {
    if (hallInit.value) {
      await hallBoardRef.value.getTownData()
      hallBoardRef.value.getData()
      hallInit.value = false
    } else {
      hallBoardRef.value.getData()
    }
  }
}

const townBoardRef = ref()
const hallBoardRef = ref()

onMounted(() => {
  townBoardRef.value.initData()
})
</script>

<style lang="scss" scoped>
$active-color: #8597ff;

.data-sort {
  &-container {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    color: $uni-text-color-inverse;

    &-bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
  }

  &-content {
    box-sizing: border-box;
    height: 100%;
    padding: 48rpx 24rpx;
    overflow: auto;
  }
}

.tab {
  &-list {
    display: flex;
    align-items: center;
    color: $uni-text-color-inverse;
  }

  &-item {
    line-height: 1;

    &.active {
      color: $active-color;
    }

    &:not(:last-child) {
      position: relative;
      margin-right: calc($uni-spacing-row-lg * 2 + 1px);

      &::after {
        position: absolute;
        top: 50%;
        right: -calc($uni-spacing-row-lg + 0.5px);
        width: 1px;
        height: 20px;
        margin: 0 $uni-spacing-row-lg;
        margin-top: -10px;
        content: '';
        background: $uni-bg-color;
      }
    }
  }
}

:deep() {
  .filter-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 48rpx;
    font-size: $uni-font-size-base;
    color: $active-color;

    & > view {
      margin-bottom: 2px;
    }
  }

  .chart-wrap {
    padding: 30rpx;
    margin-top: 20rpx;
    background: #ababab1a;
    backdrop-filter: blur(30px);
    border-radius: 12rpx;
  }
}
</style>
